<template>
  <div class="wrapper">
    <JTable :table-list="tableData" :config="tableConfig">
      <template slot="Actions" slot-scope="{row}">
        <el-button v-if="$_permisson('/core/org/update')" type="text" @click="handleActive(row,'edit')">修改</el-button>
        <el-button v-if="$_permisson('/core/org/deleteStatus')" type="text" @click="handleActive(row,'del')">删除</el-button>
      </template>
      <template slot="isVirtual" slot-scope="{row}">
        <el-tag>{{ row.isVirtual?'是':'否' }}</el-tag>
      </template>
    </JTable>

    <el-dialog :title="dialog.title[dialog.active]" :visible.sync="dialog.dialogVisible" destroy-on-close>
      <created :emit-data="selectedUserItem" @handleBoxEvent="handleDialog" />
    </el-dialog>
  </div>
</template>

<script>
import pageBtn from '@/views/mixin/pageBtn'
import { getList, createOrg, editorOrg, removeItem } from '@/api/org'
import { getTenant } from '@/api/tenant'
import created from './widget/created'
import JTable from '@/components/JTable'

export default {
  components: {
    created,
    JTable
  },
  mixins: [pageBtn],
  props: {},
  data() {
    const listQuery = {
      total: 0,
      page: 1,
      size: 10,
      handleFilter: this.getList
    }
    const dialog = {
      dialogVisible: false,
      title: { created: '创建组织机构', edit: '组织机构' },
      active: ''
    }
    return {
      listLoading: false,
      dialog,
      listQuery,
      currentId: null,
      list: [],
      tableConfig: {
        listLoading: this.listLoading,
        pagination: listQuery,
        tableAttribute: {
          'row-key': 'id',
          lazy: true,
          load: this.childrenLoad,
          'tree-props': { children: 'children', hasChildren: 'hasChildren' }
        },
        thead: [
          {
            type: 'selection'
          },
          {
            type: 'index',
            label: '-',
            start: 1,
            width: 50
          },
          {
            prop: 'name',
            label: '名称',
            width: 150
          },
          // {
          //   prop: 'tenantCode',
          //   label: '编码'
          // },
          // {
          //   prop: 'address',
          //   label: '地址'
          // },
          {
            prop: 'tenantCode',
            label: '所属租户',
            type: 'dic',
            config: {
              dicArr: this.tenantList,
              props: {
                label: 'tenant_name',
                value: 'tenant_code'
              }
            }
          },
          {
            prop: 'code',
            label: '编码'
          },
          {
            prop: 'contactName',
            label: '联系人名字'
          },
          {
            prop: 'contactEmail',
            label: '联系人邮箱'
          },
          {
            prop: 'contactPhone',
            label: '联系人电话'
          },
          // {
          //   prop: 'headEmail',
          //   label: '领导人邮箱'
          // },
          {
            prop: 'headName',
            label: '领导人名字'
          },
          // {
          //   prop: 'headPhone',
          //   label: '领导人电话'
          // },
          // {
          //   prop: 'icon',
          //   label: '图标'
          // },
          {
            prop: 'isVirtual',
            label: '虚拟机构',
            slot: true
          },
          // {
          //   prop: 'remark',
          //   label: '备注说明'
          // },
          // {
          //   prop: 'sort',
          //   label: '排序'
          // },
          // {
          //   prop: 'ancestorId',
          //   label: '祖级ID'
          // },
          // {
          //   prop: 'parentId',
          //   label: '父级ID'
          // },
          {
            prop: '',
            label: 'Actions',
            type: 'actions',
            width: '100',
            slot: true
          }
        ],
        search: [
          'address',
          'code',
          'name',
          'isVirtual',
          'contactName',
          'contactPhone',
          'headName'
        ],
        activeBox: {
          // defaultBtn: true,
          btnRules: { created: '/core/org/add', rulesFuntion: this.$_permisson }, // 按btn个数重左向右
          bindDefaultEvent: this.handleCreated
        }
      },
      tenantList: []
    }
  },
  computed: {
    tableData() {
      const data = this.list
      const result = data
      return result
    },
    selectedUserItem() {
      const { currentId } = this
      if (currentId === null) return {}
      const result = this.list.find(i => i.id === currentId)
      return result || {}
    }
  },
  watch: {},
  created() {
    this.getList()
    this.getTenantList()
  },
  mounted() { },
  methods: {
    childrenLoad(row, treeNode, resolve) {
      console.log(12, row, treeNode)
      const { id } = row
      getList({ parentId: id }).then(res => {
        const { data, code } = res
        if (code === 200) {
          resolve(data)
        }
        resolve([])
      })
    },
    getTenantList() {
      getTenant().then(res => {
        const { code, data } = res
        if (code === 200) {
          this.tenantList = data
        }
      })
    },
    getList(args = {}) {
      const { page: pageNum = 1, size: pageSize = 10, ...param } = args
      const params = { pageNum, pageSize, ...param }
      getList(params).then(res => {
        const { data, code } = res
        if (code === 200) {
          // const { list, total } = data
          // this.listQuery.total = total
          this.list = data
        }
      })
    },
    delItem(ids) {
      this.$confirm('此操作不可逆转, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        removeItem(ids).then(res => {
          const { code, message } = res
          if (code === 200) {
            this.$message({
              message,
              type: 'success'
            })
            this.getList()
            return
          }
          this.$message.error(message)
        })
      })
    },
    handleFilter() {
      console.list('条件改变')
    },
    handleActive(row, target) {
      const { id } = row
      this.currentId = id
      if (target === 'del') {
        this.delItem(id)
        return
      }
      if (['more', 'edit'].includes(target)) {
        const openTarget = target
        this.showDialog(openTarget)
      }
    },
    handleCreated() {
      this.setCurrentID()
      const target = 'created'
      this.showDialog(target)
    },
    setCurrentID() {
      this.currentId = null
    },
    showDialog(target) {
      this.dialog.dialogVisible = true
      this.dialog.active = target
    },
    closeDialog() {
      this.setCurrentID()
      this.dialog.dialogVisible = false
    },
    handleDialog(emitObj) {
      const { target } = emitObj
      if (!target) {
        return this.closeDialog()
      }
      if (this.dialog.active === 'edit') {
        this.updateItem(target)
        return
      }
      if (this.dialog.active === 'created') {
        this.saveClient(target)
        return
      }
    },
    updateItem(newData) {
      const params = { ...newData, id: this.currentId }
      editorOrg(params).then(res => {
        const { code, message } = res
        if (code === 200) {
          this.$message({
            message,
            type: 'success'
          })
          this.getList()
          this.closeDialog()
          return
        }
        this.$message.error(message)
      })
    },
    saveClient(item) {
      createOrg(item).then(res => {
        const { code, message } = res
        if (code === 200) {
          this.$message({
            message,
            type: 'success'
          })
          this.getList()
          this.closeDialog()
          return
        }
        this.$message.error(message)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.wrapper{
   padding: 0px;
   margin: 0px;
}
</style>
